<template>
      <div class="cls1" ref="chartSC"></div>
    </template>
    
    <script setup>
    import * as echarts from 'echarts'
    import china from '../assets/100000_full.json'
    import { onMounted,  ref } from 'vue';
    // 大地图
    import request from '../axios/request'
    const chartSC = ref()
    echarts.registerMap('china',china);
    function chartsInit(data) {
      var x = [];
    var y= [];
    
    for (var i = 0; i < data.length; i++) {
      x.push(data[i].area);
      y.push(data[i].total_demand);
    }
     
        var myChart = echarts.init(chartSC.value, 'Light');
       
        var option= {
    
    title: {
      text: '各地区分布图',
      textStyle: {
        color: '#1784DB',
        fontSize: 20,
        textAlign: 'center'
      },
      left: 'center',
      top: '7%'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 20,
      max: 500,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered','red']
      }
    },
    series: [
      {
        name: '销量',
        type: 'map',
        map: 'china',
        label: {
        show: true
        },
        data: [
          {name:'上海市',value:y[0]},
          {name:'北京市',value:y[1]},
          {name:'天津市',value:y[2]},
          {name:'江西省',value:y[3]},
          {name:'河南省',value:y[4]},
    
        ]
    }
    ]
    }
    
        option && myChart.setOption(option);
    }
    
    //组件挂载成功
    onMounted(function () {
      //发起axios异步请求，获取数据
        request({
            url: '/produce-api/queryAllareanum',  // 配置的代理请求会拦截
            method: 'get'
        }).then(res => {
            console.log(res.data);
            chartsInit(res.data.data)
        }).catch((error) =>
            console.log(error))
    })
    
    </script>
    <style scoped>
    .cls1{
      width: 100%;
      height: 100%;
    }
    </style>